<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp" %>
<script>
		cmdList = "/stat/queryListofcpc.action";
</script>
<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">

<div  class="load_bg" style="display:none"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
	<div class="page-content">
				<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
						<div class="row">
							 <div class="col-sm-12">
								<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;margin-top:15px;">
								<hr style="margin-top:0px;margin-bottom:0x">
								<div class="widget-header widget-header-blue widget-header-flat">
										<h4 class="widget-title">选择条件进行查询</h4>
										<div class="widget-toolbar">
											<a href="#" data-action="collapse">
												<i class="ace-icon fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<div class=" widget-body">
														<div class="widget-main" >
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"
												style="text-align: right" for="date">开始时间</label>
											<div class="col-sm-8" style="padding-left: 0;">
												<input type="text" class="date-picker form-control" 
														data-date-format="yyyy-mm-dd" style="padding-left:0px" name="startDate">
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"
												style="text-align: right" for="date">结束时间</label>
											<div class="col-sm-8" style="padding-left: 0;">
												<input type="text" class="date-picker form-control" 
														data-date-format="yyyy-mm-dd" style="padding-left:0px" name="endDate">
											</div>
										</div>
										<!-- 根据ID查询 -->	
										<div class="form-group col-xs-12 col-sm-6">
											<label class="col-sm-2 control-label"  style="text-align:right"  for="short_link">短链接:</label>
											<div class="col-sm-10">
												<div class="input-daterange input-group col-sm-12">
													<input type="text" name="short_link" class="form-control text-left">
												</div>
											</div>
										</div>
		
										<!-- 根据名字模糊查询 -->
										<div class="form-group col-xs-12 col-sm-4">
											<label class="col-sm-2 control-label"  style="text-align:right"  for="activity">activity：</label>
											<div class="col-sm-8">
												<div class="input-daterange input-group col-sm-12">
													<input type="text" name="activity" class="form-control text-left">
												</div>
											</div>
										</div>

										<div class="form-group col-xs-12 col-sm-4">
											<label class="col-sm-2 control-label"  style="text-align:right"  for="memo">备注: </label>
											<div class="col-sm-8">
												<div class="input-daterange input-group col-sm-12">
													<input type="text" name="memo" class="form-control text-left">
												</div>
											</div>
										</div>
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3" style="text-align:right">
																	<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()">
																		<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																		查询
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button class="btn btn-grey  no-border" type="reset">
																		<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																		重置
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button class="btn btn-purple no-border" type="button" name="btn-query" id="exportList">
										                            	<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
										                            	导出
										                        	</button>
														  </div>
											
												</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
								</div><!-- /.widget-box -->
							</div><!-- /.col-sm-12 -->
						</div><!-- /.row -->

	 
						<hr style="display:none;" id="delete_hr">
							<div class="row">
								<div class="col-xs-12">
								<!-- <a href="javascript:void(0)" class="btn btn-success btn-small" style="display:none" id="output" onclick="edit(-1)">新增</a> -->
									<table id="jquery-table" class="table table-striped table-bordered table-hover">
									</table>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</form>
			</div><!-- /.page-content -->
				
	<%@ include file="/common/common-js.jsp" %>
	
		<!-- inline scripts related to this page -->
	
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script type="text/javascript">

			$('#exportList').click(function () {
		        var form = document.forms["queryForm"];
		        var url = ctx + "/statshortlink/exportCVS.action";
		        form.action = encodeURI(url);
		        form.submit();
	    	});
		

			//【查询】按钮Click事件
			 function query_any(){
				$("#output").removeAttr("style");
				$(".load_bg").removeAttr("style");
				$(".load_img").removeAttr("style");
				if(jqTable != null){jqTable.fnDraw();}
				else{loaddata();}
				 $("#delete_btn").attr("style","display:block");
				 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
			  }
 
			var jqTable =null;
			var loaddata = function(){
				jQuery(function($) {
					jqTable = $('#jquery-table').dataTable( {
	                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
					    "columnDefs": [
					     		    	{
					                        "title": '日期',
					                        "targets": [0],
					                        "data": "time",//返回的数据 
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%"
					                    },
					                    {
					                        "title": '短链接',
					                        "targets": [1],
					                        "data": "short_link",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					    	    	  	    "render": function(value, type, row) { 
					    	    	  	  		return '<a target="_blank" href="' + value + '">' + value + '</a>';
					    	    	  	    } 
					                    },
					                    {
					                        "title": 'pv',
					                        "targets": [2],
					                        "data": "pv",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%"
					                    },
					                    {
					                        "title": 'uv',
					                        "targets": [3],
					                        "data": "uv",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					                    },
					                    {
					                        "title": '类型',
					                        "targets": [4],
					                        "data": "type",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					                        "render": function(value, type, row) { 
					                        	switch (value) {
												case 'null':
													value = '--';
													break;
												default:
													value = value;
													break;
												}
					    	    	  	  		return value;
					    	    	  	    } 
					                    },
					                    {
					                        "title": '备注',
					                        "targets": [5],
					                        "data": "memo",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					                        "render": function(value, type, row) { 
					                        	switch (value) {
												case 'null':
													value = '--';
													break;
												default:
													value = value;
													break;
												}
					    	    	  	  		return value;
					    	    	  	    } 
					                    },
					                    {
					                        "title": 'activity',
					                        "targets": [6],
					                        "data": "activity",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					                        "render": function(value, type, row) { 
					                        	switch (value) {
												case 'null':
													value = '--';
													break;
												default:
													value = value;
													break;
												}
					    	    	  	  		return value;
					    	    	  	    } 
					                    },
					                    {
					                        "title": '单价',
					                        "targets": [7],
					                        "data": "unit_privce",
					                        "class": "center",
					                        "bSortable": false,
					                        "width": "5%",
					                        "render": function(value, type, row) { 
					                        	switch (value) {
												case 'null':
													value = '--'; 
													break;
												default:
													value = value;
													break;
												}
					    	    	  	  		return value;
					    	    	  	    } 
					                    }
				
	                  	],
						"sAjaxSource": ctx + cmdList,//数据源URL
						"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
					   			var data = $('#queryForm').serializeObject();
								data.aoData = JSON.stringify(aoData);
								$.ajax({
									"dataType": 'json',
									"type": "POST",
									"url": sSource,
									"data":data,
									"success": function(resp){
										fnCallback(resp);
										initListPage();
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
									},
									"error": function(XMLHttpRequest, textStatus, errorThrown) {
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
										alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
									},
								});
						},
						"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
							//console.log("---" + nRow + "+++++" + aData["id"]);
							//=====================这里实现行双击事件======================//
							nRow.ondblclick = function() {
								window.open(ctx + cmdDetail + "?id=" + aData["id"]);
							}; 
						},
						"sScrollXInner": "100%",
						"sScrollY": "100%",//如果不设置，IE会有问题
						 "aaSorting": [[1,"desc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
				    });
	
			});//end jquery初始化
		}
			$(document).ready(function(){
				//时间范围插件初始化
				$('.date-picker').datepicker({
					autoclose : true,
					format : 'yyyy-mm-dd'
				});
			});
		</script>
</body>
</html>
